<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<select id="selProvince">
			<option value="">请选择</option>
		</select>
		<select id="selCity">
			<option value="">请选择</option>
		</select>
		<select id="selCountry">
			<option value="">请选择</option>
		</select>
		<script type="text/javascript">
			 var iNum1;
			 var iNum2;
			let aprovince=['湖北','江苏','安徽'];
			let aCity=[['武汉','黄州','荆门'],['南京','无锡','镇江'],['合肥','安庆','黄山']];
			let aCountry=[[['武汉1','武汉2'],['黄州1','黄州2'],['荆门','荆门2']],[['南京1','南京2'],['无锡1','无锡2'],['镇江1','镇江2']],[['合肥1','合肥2'],['安庆1','安庆2'],['黄山1','黄山2']]];
			
			  $(function () {
			            for(var i=0;i<aprovince.length;i++){
			                $('#selProvince').append('<option>'+aprovince[i]+'</option>');
			            };
			            $('#selProvince').change(function () {
			                $('#selCity').children().not(':eq(0)').remove();
			                $('#selCountry').children().not(':eq(0)').remove();
			                iNum1 = $(this).children('option:selected').index();
			                var aaCity = aCity[iNum1-1];
			                for(var j=0;j<aaCity.length;j++){
			                    $('#selCity').append('<option>'+aaCity[j]+'</option>');
			                }
			            });
			            $('#selCity').change(function () {
			                $('#selCountry').children().not(':eq(0)').remove();
			                iNum2 = $(this).children('option:selected').index();
			                var aaCountry = aCountry[iNum1-1][iNum2-1];
			                for(var k=0;k<aaCountry.length;k++){
			                    $('#selCountry').append('<option>'+aaCountry[k]+'</option>');
			                }
			            })
			       })
		</script>
	</body>
</html>
